<template>
	<!-- <view class="content" :style="{backgroundImage: 'url('+ urls+ '/app/index/chouhebj.png' +')' }" > -->
	<scroll-view  :enhanced="true" :show-scrollba="false">
	<view class="content">
		<image class="header_top ldx-cycle" :src=" iconurl + '/static/index/chou.png'"></image>
		<view class="view_cont" >
			<view class="section_swiper" v-if="playdata.type==1">
				<view class="swiper">
						<view class="img flexs">
							<image :src="playdata.prize_icon" @click="proviewimg(item.prize_icon)"></image>
						</view>
						<view class="name flexs">
							恭喜您开出
						</view>
						<view class="name flexs">
							{{playdata.prize_name}}
						</view>
						<view class="price flexs">
							￥{{playdata.price}}
						</view>
				</view>
			</view>
			<view class="couplist "   v-if="playdata.type==2" style="background: url(https://pd.pdaxiang.com/upload/static/user/couponbj.png);">
				<view class="left flexs"  >
					<view class="left_cont">
						<text class="sub_price">￥{{playdata.sub_price}}</text>
						<text>{{playdata.text}}</text>
					</view>
				</view>
				<view class="con">
					<view class="name">
						{{playdata.name}}
					</view>
					<view class="name">
						{{playdata.title}}
					</view>
					<view class="times">{{playdata.begin_time}}-{{playdata.end_time}}</view>
				</view>
			</view>
			<view class="footer" >
				<view class="foot_left flexs" @click="gostore">
					{{playdata.type==1?'去仓库查看':'去使用'}}
				</view>
			</view>
		</view>
		
	</view>
	</scroll-view>
</template>

<script>
const innerAudioContext = uni.createInnerAudioContext();
export default {
	data() {
		return {
			urls: this.$configs.urls,
			id: '',
			boxList: [],
			page:1,
			boxarr:[],
			lastRecord: '',
			navigationBarHeight: 0,
			indicatorDots: true,
			autoplay: false,
			box_id:"",
			luckdata:{},
			playdata:[],
			istype:1,
			iconurl:this.$configs.urls
		};
	},
	onReady() {
		uni.getSystemInfo({
			success: function(res) {
				this.navigationBarHeight = res.navigationBarHeight;
			}
		});
	},
	onLoad(e) {
		////console.log(e,"传的")
		this.playVoice('https://pd.pdaxiang.com/upload/static/index/mp3.mp3')
		uni.$emit('mhpage',{page: e.mhpage})
		this.box_id = e.box_id
		this.id = e.id
		this.istype = e.istype
		//开盒
		this.playlist()
	},
	onShow() {},
	onBackPress(e){
	  ////console.log("监听返回按钮事件",e);
	  uni.switchTab({
	  	  url:"/pages/index/redouble"
	  })
	  return true;
	},
	methods: {
		proviewimg(img) {
			let arr = [];
			arr.push(img);
			uni.previewImage({
				urls: arr
			});
		},
		gostore(){
			if(this.playdata.type==1){
				uni.redirectTo({
					url:"/userPage/user/order/mystore"
				})
			}else{
				uni.switchTab({
					url:"/pages/index/redouble"
				})
			}
			
		},
		playVoice(url) { // url即为音频路径
			if (url) {
				// 判断路径是否已经被赋值，以及音频播放状态 !innerAudioContext.paused为正在播放
				if (this.lastRecord == url && !innerAudioContext.paused) {
					innerAudioContext.stop();  // 停止
					return;
				}
				this.lastRecord = url; 			// 将路径赋值给定义的变量好做判断
				innerAudioContext.src = url;  	// 配置音频播放路径
				innerAudioContext.play();		// 播放
				innerAudioContext.loop = false	// 是否循环播放
			}
		},
		proviewimgCover(img) {
			let arr = [];
			arr.push(img);
			uni.previewImage({
				urls: arr
			});
		},
		xiaye(){
			this.page++;
			this.paySuccess();
		},
		shangye(){
			if(this.page==1){
				this.page = 1;
				setTimeout(()=>{
					uni.showToast({
						title:"已经是第一页了",
						icon:"none"
					})
				},800)
				 clearTimeout();
			}else{
				this.page--;
			}
			this.paySuccess();
		},
		gohegui(){
			uni.switchTab({
				url:"/pages/index/selection"
			})
		},
		playlist(){
			let data = {
				id:this.id
			}
			this.$Request.get(this.$api.order.openBox,data).then(res => {
				this.playdata = res.data
			});
		},
		goback(){
			uni.navigateBack({
				delta:2
			})
		},
	}
};
</script>

<style lang="scss" scoped>
	
	.section{
		margin-top: 200rpx;
		position: absolute;
		top: 0;
		z-index: 2;
		.foot_btn{
			width: 302rpx;
			height: 88rpx;
			margin: 0 auto;
			background: #FAE24E;
			border-radius: 100rpx;
			color: #333;
			font-size: 32rpx;
			margin-top: 40rpx;
		}
		.tishi{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #fff;
			margin-top: 92rpx;
		}
		.price{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			margin-top: 24rpx;
		}
		.name{
			width: 503rpx;
			min-height: 88rpx;
			padding: 10rpx 40rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-radius: 100rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #fff;
		}
		.img{
			width: 503rpx;
			height: 514rpx;
			background: #F3F3F3;
			margin: 0 auto;
			border-radius: 10rpx;
			image{
				width: 468rpx;
				height: 470rpx;
				border-radius: 10rpx;
			}
		}
	}
	@keyframes ldx-cycle {
		0% {
			animation-timing-function: cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667);
			transform: rotate(0)
		}
	
		100% {
			transform: rotate(360deg)
		}
	}
	
	.ldx-cycle {
		animation: ldx-cycle 8s infinite linear
	}
	::-webkit-scrollbar {width: 0px; height: 0px;color: transparent;}
	.content{
		min-height: 100vh;
		background: #f8f8f8;
		background-repeat: no-repeat !important;
		background-size: 100% 100% !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 50rpx;
	}
	.header_top{
		width: 1850rpx;
		min-height: 1850rpx;
		position: absolute;
		z-index: 1;
	}
.view_cont {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 50rpx;
	position: absolute;
	top: 0;
	z-index: 2;
	.couplist{
		width: 626rpx;
		height: 185rpx;
		background-size: 100% 100%;
		margin: 30rpx auto 0 auto;
		// border: 2rpx solid #FFD453;
		border-radius: 10rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-repeat: no-repeat !important;
		background-size: 100% 100% !important;
		position: relative;
		margin-bottom: 20rpx;
		.guoqi{
			width: 88rpx;
			height: 84rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		.left{
			width: 244rpx;
			height: 152rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.size26{
				font-size: 26rpx;
			}
			.left_cont{
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				text{
					font-size: 20rpx;
					padding-bottom: 10rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
				.sub_price{
					font-size: 40rpx;
				}
			}
			.text-bold{
				font-size: 70rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
		.con{
			margin-left: 35rpx;
			.name{
				font-size: 40rpx;
				color: #707070;
			}
			.times{
				font-size: 24rpx;
				color: #707070;
				margin-top: 15rpx;
			}
		}
		.l_btns{
			width: 126rpx;
			margin-top: 60rpx;
		}
		.l_btn{
			width: 126rpx;
			height: 49rpx;
			border-radius: 49rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			background: #FFD453;
		}
		.chehui{
			background: #C0C0C0;
		}
	}
	.foottext{
		width: 750rpx;
		height: 60rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}
	.footbtn {
		width: 230rpx;
		height: 73rpx;
		background: linear-gradient(94deg, #ef4e4e, #f95e34);
		border: 4rpx solid #5c3000;
		border-radius: 10rpx;
		color: #000000;
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 36rpx;
	}
	.header {
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 384rpx;
			height: 86rpx;
		}
	}
	.section1 {
		width: 336rpx;
		height: 465rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #f5f5f5;
		border: 4rpx solid #000000;
		border-radius: 2rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.section_swiper{
		margin-top: 100rpx;
		.swiper{
			width: 100vw;
			min-height: 800upx;
			.price{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
				margin-top: 14rpx;
			}
			.name{
				width: 503rpx;
				height: 68rpx;
				margin: 0 auto;
				margin-top: 4rpx;
				border-radius: 100rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
			}
			.img{
				width: 503rpx;
				height: 514rpx;
				background: #F3F3F3;
				margin: 0 auto;
				border-radius: 10rpx;
				image{
					width: 468rpx;
					height: 470rpx;
					border-radius: 10rpx;
				}
			}
		}
		
	}
	.footer{
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
		.foot_left{
			width: 270rpx;
			height: 80rpx;
			background:#FAE24E;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333;
			border-radius: 100rpx;
		}
		.foot_right{
			width: 270rpx;
			height: 80rpx;
			background:#FAE24E;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333;
			border-radius: 100rpx;
		}
	}
}
</style>
